<template>
  <div class="reviews-container">
    <div class="reviews-header">
      <h2>羽毛球装备测评</h2>
      <div class="reviews-filters">
        <select v-model="selectedCategory" @change="filterReviews">
          <option value="all">全部装备</option>
          <option value="racket">羽毛球拍</option>
          <option value="shoes">羽毛球鞋</option>
          <option value="bag">运动包</option>
          <option value="clothes">运动服装</option>
          <option value="accessories">其他配件</option>
        </select>
        <select v-model="sortOption" @change="filterReviews">
          <option value="newest">最新发布</option>
          <option value="highest">评分最高</option>
          <option value="lowest">评分最低</option>
        </select>
      </div>
    </div>

    <!-- 测评列表 -->
    <div class="reviews-grid">
      <div class="review-card" v-for="review in filteredReviews" :key="review.id">
        <div class="review-image">
          <img :src="review.imageUrl" :alt="review.productName">
        </div>
        <div class="review-content">
          <div class="review-category">{{ getCategoryName(review.category) }}</div>
          <h3 class="review-title">{{ review.productName }}</h3>
          <div class="review-rating">
            <div class="stars" :style="{ width: (review.rating / 5) * 100 + '%' }"></div>
          </div>
          <p class="review-summary">{{ review.summary }}</p>
          <div class="review-meta">
            <span class="review-author">测评人: {{ review.author }}</span>
            <span class="review-date">{{ formatDate(review.date) }}</span>
          </div>
          <button class="read-more-btn">查看完整测评</button>
        </div>
      </div>
    </div>

    <div class="no-reviews" v-if="filteredReviews.length === 0">
      暂无相关装备测评
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue';

// 状态管理
const selectedCategory = ref('all');
const sortOption = ref('newest');

// 模拟测评数据
const reviews = ref([
  {
    id: 1,
    productName: '尤尼克斯 YONEX ASTROX 99 PRO',
    category: 'racket',
    rating: 4.8,
    date: '2025-09-20',
    author: '羽毛球达人',
    summary: '这款球拍平衡点适中，中杆弹性好，适合进攻型选手使用，杀球威力大且控球精准。',
    imageUrl: 'https://img10.360buyimg.com/n7/jfs/t1/274189/3/24503/137604/6805eeafF6bcdcb34/5b0e2a995f870a6d.jpg'
  },
  {
    id: 2,
    productName: '李宁 突袭7C',
    category: 'racket',
    rating: 4.5,
    date: '2025-09-15',
    author: '羽球小将',
    summary: '轻量化设计，挥拍速度快，适合双打选手，中前场控制表现出色。',
    imageUrl: 'https://img12.360buyimg.com/n7/jfs/t1/315161/1/7126/58846/68416a73F2c875784/068ee0cfd67a694d.jpg'
  },
  {
    id: 3,
    productName: '胜利 VICTOR A970ACE',
    category: 'shoes',
    rating: 4.7,
    date: '2025-09-10',
    author: '专业评测师',
    summary: '缓震效果出色，侧向支撑强，适合高强度比赛，长时间穿着脚部疲劳感低。',
    imageUrl: 'https://img14.360buyimg.com/n7/jfs/t1/183930/29/36975/41826/64f7e39fF261efabe/442e722b19f8912b.jpg'
  },
  {
    id: 4,
    productName: '尤尼克斯 YONEX BAG9202EX',
    category: 'bag',
    rating: 4.3,
    date: '2025-09-05',
    author: '装备控',
    summary: '容量大，分隔合理，能同时容纳2-3支球拍及其他配件，防水性能好。',
    imageUrl: 'https://img10.360buyimg.com/n7/jfs/t1/75171/37/23412/86905/6496bddbF3a555425/e415cf8d2e69e2f8.jpg'
  },
  {
    id: 5,
    productName: '李宁 羽毛球运动T恤',
    category: 'clothes',
    rating: 4.0,
    date: '2025-08-28',
    author: '运动达人',
    summary: '面料透气吸汗，速干效果好，版型修身不影响运动，性价比高。',
    imageUrl: 'https://img14.360buyimg.com/n7/jfs/t1/210609/39/32954/39442/6629f0d1F0e336fbf/22601930174ab978.jpg'
  },
  {
    id: 6,
    productName: '尤尼克斯 AC102 手胶',
    category: 'accessories',
    rating: 4.6,
    date: '2025-08-20',
    author: '羽球爱好者',
    summary: '粘性适中，吸汗效果好，手感舒适，缠绕方便，耐用度高。',
    imageUrl: 'https://img12.360buyimg.com/n7/jfs/t1/132007/27/29744/147100/62df91c4E7b01896d/164faa67efb93ebe.jpg'
  }
]);

// 筛选和排序测评
const filteredReviews = computed(() => {
  let result = [...reviews.value];

  // 按类别筛选
  if (selectedCategory.value !== 'all') {
    result = result.filter(review => review.category === selectedCategory.value);
  }

  // 排序
  if (sortOption.value === 'newest') {
    result.sort((a, b) => new Date(b.date) - new Date(a.date));
  } else if (sortOption.value === 'highest') {
    result.sort((a, b) => b.rating - a.rating);
  } else if (sortOption.value === 'lowest') {
    result.sort((a, b) => a.rating - b.rating);
  }

  return result;
});

// 获取分类名称
const getCategoryName = (categoryValue) => {
  const categories = {
    'racket': '羽毛球拍',
    'shoes': '羽毛球鞋',
    'bag': '运动包',
    'clothes': '运动服装',
    'accessories': '其他配件'
  };
  return categories[categoryValue] || '其他';
};

// 格式化日期
const formatDate = (dateString) => {
  const date = new Date(dateString);
  return date.toLocaleDateString('zh-CN', {
    year: 'numeric',
    month: 'long',
    day: 'numeric'
  });
};

// 筛选测评
const filterReviews = () => {
  // 筛选逻辑已在computed属性中实现
};
</script>

<style scoped>
.reviews-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem;
}

.reviews-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid #e0e0e0;
  flex-wrap: wrap;
  gap: 1rem;
}

.reviews-header h2 {
  color: #2196F3;
  margin: 0;
}

.reviews-filters {
  display: flex;
  gap: 1rem;
}

.reviews-filters select {
  padding: 0.6rem 1rem;
  border: 1px solid #ddd;
  border-radius: 6px;
  background-color: white;
}

/* 测评列表 */
.reviews-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
  gap: 2rem;
}

.review-card {
  display: flex;
  flex-direction: column;
  border: 1px solid #e0e0e0;
  border-radius: 12px;
  overflow: hidden;
  transition: transform 0.3s, box-shadow 0.3s;
}

.review-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.review-image {
  height: 200px;
  overflow: hidden;
}

.review-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s;
}

.review-card:hover .review-image img {
  transform: scale(1.05);
}

.review-content {
  padding: 1.5rem;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.review-category {
  display: inline-block;
  padding: 0.3rem 0.6rem;
  background-color: #e3f2fd;
  color: #2196F3;
  border-radius: 4px;
  font-size: 0.8rem;
  font-weight: 500;
  margin-bottom: 0.8rem;
  width: fit-content;
}

.review-title {
  color: #333;
  margin: 0 0 1rem 0;
  font-size: 1.2rem;
}

.review-rating {
  height: 24px;
  background-color: #eee;
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 1rem;
}

.stars {
  height: 100%;
  background: linear-gradient(90deg, #FFC107 0%, #FF9800 100%);
  transition: width 0.3s;
}

.review-summary {
  color: #555;
  line-height: 1.6;
  margin: 0 0 1.5rem 0;
  flex: 1;
}

.review-meta {
  display: flex;
  justify-content: space-between;
  color: #777;
  font-size: 0.9rem;
  margin-bottom: 1.5rem;
}

.read-more-btn {
  background-color: #2196F3;
  color: white;
  border: none;
  padding: 0.6rem 1.2rem;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 500;
  transition: background-color 0.3s;
  align-self: flex-start;
}

.read-more-btn:hover {
  background-color: #1976D2;
}

.no-reviews {
  text-align: center;
  padding: 3rem;
  color: #777;
  background-color: #f9f9f9;
  border-radius: 12px;
  grid-column: 1 / -1;
}

@media (max-width: 768px) {
  .reviews-header {
    flex-direction: column;
    align-items: flex-start;
  }
  .reviews-grid {
    grid-template-columns: 1fr;
  }
}
</style>